<template>

  <div>
    <el-dialog :visible.sync="flag" width="40%" top="10vh">

      <el-form ref="loginForm"  label-width="80px" class="login-box">
        <h3 class="login-title">手动添加记录信息</h3>
        <h4 style="color: red">警告！手动添加会扰乱出入记录，请谨慎添加！</h4>

        <el-form-item label="车牌号">
          <el-input type="text" v-model="record.carLicenseId"/>
        </el-form-item>

        <el-form-item label="进入时间">
          <el-input type="text" v-model="record.enterTime"/>
        </el-form-item>

        <el-form-item label="离开时间">
          <el-input type="text" v-model="record.leaveTime"/>
        </el-form-item>

        <el-form-item label="车辆类型">
          <el-input type="text" v-model="record.interior"/>
        </el-form-item>

        <el-form-item label="费用">
          <el-input type="text" v-model="record.expense"/>
        </el-form-item>

      </el-form>

      <div style="margin: 0 auto;margin-bottom: 20px">
        <el-button type="success" @click="onSubmit">确定修改</el-button>
      </div>

    </el-dialog>

    <!-- 搜索栏 -->
    <div style="height: 60px;background: #fcfcbc;width: 100%">
        <el-row style="height: 60px;text-align: left;margin-left: 20px">

          <el-col :span="12" style="margin-top: 20px">
            <el-radio-group v-model="radio" @change="doSelect">
              <el-radio label="1">所有记录</el-radio>
              <el-radio label="2">业主车辆</el-radio>
              <el-radio label="3">外来车辆</el-radio>
            </el-radio-group>
            <el-button type="primary" size="mini" style="margin-left: 55px" @click="flag = true">添加记录</el-button>
          </el-col>

          <el-col :span="10" :offset="2">
            <el-input placeholder="输入车牌搜索" v-model="searchText" @keyup.enter.native="doSearch" style="margin-top: 10px;width: 80%">
              <template slot="append">
                <el-button type="primary" icon="el-icon-search" @click="doSearch">查询</el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
    </div>

    <!-- 列表名-->
    <el-table
      :data="tableData"
      :stripe="true"
      style="width: 100%;height: 509px;overflow: auto">
      <el-table-column
        align="center"
        prop="carLicenseId">
        <template slot="header" slot-scope="scope">
          <span class="headerLine">车牌号</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="enterTime">
        <template slot="header" slot-scope="scope">
          <span class="headerLine">进入时间</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="leaveTime">
        <template slot="header" slot-scope="scope">
          <span class="headerLine">离开时间</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="interior">
        <template slot="header" slot-scope="scope">
          <span class="headerLine">是否业主车辆</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="expense">
        <template slot="header" slot-scope="scope">
          <span class="headerLine">收费</span>
        </template>
      </el-table-column>

    </el-table>
  </div>

</template>

<script>
export default {
  name: "AllRecordList",
  data() {
    return {
      radio: '1',
      searchText: '',
      flag: false,

      record:
        {
          carLicenseId: '',
            enterTime: '',
          leaveTime: '',
          interior: '',
          expense: '',
        },

      tableData: [
        {
          carLicenseId: '',
          enterTime: '',
          leaveTime: '',
          interior: '',
          expense: '',
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$axios({
        url: '/record/addRecord',
        method: "post",
        data: this.record
      }).then(()=>{
        this.flag = false;
      })
    },
    doSearch() {
      this.$axios({
        url: "/record/recordsCarId",
        params: {carLicenseId:this.searchText}
      }).then(res=>{
        res.data.forEach((value1)=>{
          if(value1.interior===false){
            value1.interior="否"
          }else{
            value1.interior="是"
          }
        })
        this.tableData=res.data;
      })
    },
    doSelect() {
      if(this.radio==="1"){
        this.$axios({
          url: '/record/recordsList'
        }).then(res => {
          res.data.forEach((value)=>{
            if (value.interior===true){
              value.interior = '是'
            }else {
              value.interior = '否'
            }
          })
          this.tableData = res.data;
        })
      }else if(this.radio==="2"){
        this.$axios({
          url:'record/recordsInterior',
          params:{isInterior: true}
        }).then(res=>{
          this.tableData = res.data;
        })
      } else {
        this.$axios({
          url:'record/recordsInterior',
          params:{isInterior: false}
        }).then(res=>{
          this.tableData = res.data;
        })
      }
    },
  },


  mounted() {
    this.$axios({
      url: '/record/recordsList'
    }).then(res => {
       res.data.forEach((value)=>{
         if (value.interior===true){
           value.interior = '是'
         }else {
           value.interior = '否'
         }
       })
       this.tableData = res.data;
    })
  }
}
</script>

<style scoped>

.headerLine {
  color: #c17b1f;
  font-size: 20px;
}
</style>
